<!-- goods component -->
<template>
  <div class="goods">
    <div class="goods-img">
      <img v-lazy="goods.cover" :key="goods.cover" alt="" @load="imageLoad" />
    </div>
    <div class="goods-info">
      <p class="info-title">{{ goods.title }}</p>
      <div class="info-num">
        <span class="info-price">{{ price }}</span>
        <span class="info-like">{{ goods.likeNum }} </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    goods: {
      type: Object,
      default() {
        return {
          cover: "",
          title: "",
          nowPrice: "0",
          likeNum: 0
        };
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    price() {
      return "¥" + parseFloat(this.goods.nowPrice);
    }
  },
  methods: {
    imageLoad(e) {
      let path = this.$route.path;
      this.$bus.$emit("goodsImageLoad", { path, e });
    }
  },
  components: {}
};
</script>

<style scoped>
.goods {
  font-size: 12px;
  background: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.goods-img {
  height: 200px;
  overflow: hidden;
}
.goods-img img {
  width: 100%;
}
.goods-info {
  padding: 4px;
  line-height: var(--line-height);
}
.info-title {
  display: -webkit-box;
  height: 2.8em;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}
.info-num {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.info-price {
  color: #333;
  font-size: 16px;
  font-weight: 700;
}
.info-like {
  padding-right: 18px;
  background: url("~@/assets/img/common/like.svg") no-repeat center right;
  background-size: 14px 14px;
}
</style>
